import React  from 'react';
// props

class App extends React.Component{

state = {
  title: '导航',
  sidebarColor: 'red'
}

  render() {
    return (
      <div>
        {/* 类组件 */}
        <Navbar title={this.state.title}></Navbar>

        {/* 函数式组件 */}
        <Sidebar bg={this.state.sidebarColor} position="left"></Sidebar>

        <div>
          <button onClick={()=>{
            this.setState({
                title: '地址',
                sidebarColor: 'blue'
            })
          }}>
            修改转态
          </button>
        </div>
      </div>
    );
  }
}
//  子组件class
// 组件中默认有一个props 对象,里面存放从父组件中传过来的数据
class Navbar extends React.Component {
  //属性是父组件传来的，this.props
  render() {
    // console.log(this.props)
    let { title, leftshow } = this.props;
    return (
      <div>
        {leftshow && <button>返回</button>}
        navbar-{title}
        <button>home</button>
      </div>
    );
  }
}
// 函数组件
// 函数组件中加一个props 参数,里面存放从父组件中传过来的数据
function Sidebar(props) {
  return (
    <div style={{ background: props.bg }}>
      <ul>
        <li>11111</li>
      </ul>
    </div>
  );
}

export default App;
